<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_620866_2oo4ijsffdklz0k9.css">
	<style>
		#main{
			height: 100%;
			width: 100%;
			background-color: #eee;
		}
		.banner{
			width: 100%;
			font-size: 0;
		}
		.banner img{
			width: 100%;
		}
		/*nav*/
		.nav{
			margin-bottom: 12px;
		}
		.nav-line{
			display: -webkit-box;
	        display: -webkit-flex;
	        display: flex;
	        background-color: #fff;
		}
		.nav-item{
			-webkit-box-flex: 1;
	        -webkit-flex: 1;
	        flex: 1;
	        text-align: center;
	        color: #666;
	        padding: 10px 0;
	        align-items:center;
		}
		.nav-item .iconfont{
			margin-top: 10px;
			font-size: 24px;
		}
		/*contant*/
		.content,.content-item-head{
			box-sizing: border-box;
			border-top: 1px solid #eee;
			width: 100%;
			background-color: #fff;
		}
		.content{
			padding: 10px;
		}

		.content-head{
			padding-bottom: 10px;
		}
		.content-head h2{
			color: #666;
			font-size: 20px;
			padding-bottom: 5px;
		}
		.content-head span{
			font-size: 14px;
			color: #ccc;
		}
		.content-item{
			padding: 5px 0;
		}
		.content-item-head{
			font-size: 16px;
			padding: 5px 0;
		}
		.content-item-head h2{
			font-size: 16px
			color:#444;	
		}
		.content-item-head span{
			font-size: 14px;
			color: #ccc;
		}
		.content-item-body{
			color: #444;
			font-size: 14px;
		}
	</style>
</head>
<body>
    <div id="main">
		<div class="banner">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524030244&di=c1df60e9210160f3a81894fbbe0a69b0&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.jdzj.com%2FUserDocument%2F2012Y%2Faotengjinshu%2FPicture%2F20121114145528.jpg" alt="">
		</div>
		<div class="nav">
			<div class="nav-line">
				<div class="nav-item">
					<span class="iconfont icon-cangku"></span><br/>
	    			<span class="note">模型库</span>
				</div>
				<div class="nav-item">
					<span class="iconfont icon-chilun"></span><br/>
	    			<span class="note">设计师</span>
				</div>
				<div class="nav-item">
					<span class="iconfont icon-dayinji"></span><br/>
	    			<span class="note">3D打印机</span>
				</div>
			</div>
			<div class="nav-line">
				<div class="nav-item">
					<span class="iconfont icon-leihuaxueyuanliaox"></span><br/>
	    			<span class="note">耗材</span>
				</div>
				<div class="nav-item">
					<span class="iconfont icon-cheliangpeijianxiaohaohuizong"></span><br/>
	    			<span class="note">配件</span>
				</div>
				<div class="nav-item">
					<span class="iconfont icon-daorumoxing50"></span><br/>
	    			<span class="note">模型实物</span>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="content-head">
				<h2>/&nbsp;&nbsp;原创推荐&nbsp;&nbsp;/</h2>
				<span>Recommend</span>
			</div>
			<div class="content-body">
				<div class="content-item" v-for="(item,index) of contentList">
					<div class="content-item-head">
						<h2>{{item.title}}{{index}} </h2>
						<span>{{item.note}}</span>
					</div>
					<div class="content-item-body">
						例子这里填充图片，可以通过浮动布局或flex或gird(css3新特性)
					</div>
				</div>
			</div>
		</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function(){
		var mainEl = $api.byId('main')
		var index = api.pageParam.wareTypeIndex
		// function renderMainEl(index) {
		// 	switch(index){
		// 		case:
		// 	}
		// }
		renderMainEl()
		function renderMainEl() {
			new Vue({
				el: '#main',
				data:function(){
					return {
						index:index+1,
						test:'asdsdasda',
						contentList:[
							{
								title:'动态标题',
								note:'内容通过异步请求获取'
							},
							{
								title:'动态标题',
								note:'vue只面向数据不操作dom'
							},
							{
								title:'动态标题',
								note:'内容通过异步请求获取'
							},
							{
								title:'动态标题',
								note:'内容通过异步请求获取'
							},
							{
								title:'动态标题',
								note:'内容通过异步请求获取'
							},
						]
					}
				}
			})
		}
    };
</script>
</html>